{%extends 'layout.admin.html'%}
{%block content%}
{% load authfilters %}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>

<div class="page-header d-print-none">
  <div class="container-xl">
    <div class="row g-2 align-items-center">
      <div class="col">
        <h1 class="page-title">Markdown Editor</h1>
        <h4 class="seo-h1">
Professional Markdown Editor with Real-Time Preview. Experience the power of GitHub Flavored Markdown (GFM) with syntax highlighting, live HTML preview, and instant conversion. Write documentation, blogs, README files, and technical content with ease. Features include toolbar shortcuts, auto-save, and export capabilities. Perfect for developers, writers, and content creators who need a reliable, fast, and feature-rich Markdown editing environment. Transform your Markdown into clean HTML instantly while maintaining full control over your content structure and formatting.
        </h4>
      </div>
    </div>
  </div>
</div>

<div class="page-body">
    <div class="container-xl">
        <div class="row row-cards">
             <div class="col-md-6">
                <div class="card">
                  <div class="card-header">
                    <h4 class="card-title">Markdown Editor</h4>
                  </div>
                  <div class="card-body" style="padding: 0;">
                    <textarea id="markdown-editor"></textarea>
                  </div>
                </div>
             </div>
             <div class="col-md-6">
                 <div class="card" style="height: 100%;">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h4 class="card-title">HTML Preview</h4>
                        <a href="{{host}}" onclick="return copyHtml(this);" class="badge badge-outline text-secondary fw-normal badge-pill">Copy HTML</a>
                    </div>
                    <div class="card-body">
                        <div id="html-preview" style="overflow-y: auto; border: 1px solid #ddd; padding: 1rem; background: #fff; border-radius: 4px;">
                        </div>
                    </div>
                </div>
             </div>
       </div>
    </div>
</div>

<style type="text/css">
.EasyMDEContainer {
    border: none;
}
.EasyMDEContainer .CodeMirror {
    border: none;
    border-radius: 0;
    min-height: 600px;
    font-size: 14px;
    line-height: 1.5;
}
.EasyMDEContainer .editor-toolbar {
    border: none;
    border-bottom: 1px solid #ddd;
    background: #f8f9fa;
}
.EasyMDEContainer .editor-toolbar.fullscreen {
    background: #f8f9fa;
}
.EasyMDEContainer .CodeMirror-fullscreen {
    z-index: 9999;
}
#html-preview h1, #html-preview h2, #html-preview h3, #html-preview h4, #html-preview h5, #html-preview h6 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}
#html-preview h1 { font-size: 2rem; }
#html-preview h2 { font-size: 1.75rem; }
#html-preview h3 { font-size: 1.5rem; }
#html-preview h4 { font-size: 1.25rem; }
#html-preview h5 { font-size: 1.1rem; }
#html-preview h6 { font-size: 1rem; }
#html-preview p { margin-bottom: 1rem; }
#html-preview code {
    padding: 0.2rem 0.4rem;
    background: #f1f3f4;
    border-radius: 3px;
    font-size: 0.875rem;
}
#html-preview pre {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
    margin-bottom: 1rem;
}
#html-preview blockquote {
    border-left: 4px solid #ddd;
    padding-left: 1rem;
    margin: 1rem 0;
    color: #666;
}
#html-preview ul, #html-preview ol {
    padding-left: 2rem;
    margin-bottom: 1rem;
}
#html-preview table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}
#html-preview th, #html-preview td {
    padding: 0.5rem;
    border: 1px solid #ddd;
    text-align: left;
}
#html-preview th {
    background: #f8f9fa;
    font-weight: 600;
}
.markdown>table, .table {
    width: inherit;
}
</style>

<script type='text/javascript'>
const easyMDE = new EasyMDE({
    element: document.getElementById('markdown-editor'),
    spellChecker: false,
    autofocus: true,
    placeholder: 'Start writing your Markdown here...',
    status: ['autosave', 'lines', 'words', 'cursor'],
    toolbar: [
        'bold', 'italic', 'heading', '|',
        'code', 'quote', 'unordered-list', 'ordered-list', '|',
        'link', 'image', 'table', '|',
        'preview', 'side-by-side', 'fullscreen', '|',
        'guide'
    ],
    initialValue: `# Welcome to Markdown Editor

## Features

This **Markdown Editor** provides a powerful writing experience with:

- **Real-time preview** - See your formatted content as you type
- **GitHub Flavored Markdown** support
- **Syntax highlighting** for better readability
- **Toolbar shortcuts** for common formatting
- **Auto-save** functionality
- **Export to HTML** capability

## How to Use

1. Start typing in this editor
2. Use the toolbar buttons for quick formatting
3. View the live preview on the right
4. Copy the generated HTML when ready

### Code Example

\`\`\`javascript
function greet(name) {
    return \`Hello, \${name}!\`;
}

console.log(greet('World'));
\`\`\`

### Table Example

| Feature | Status |
|---------|--------|
| Live Preview | ✅ |
| Syntax Highlighting | ✅ |
| Auto-save | ✅ |
| Export HTML | ✅ |

> **Tip**: Use the preview and side-by-side modes from the toolbar for different viewing options!

Happy writing! 🚀`,
    autosave: {
        enabled: true,
        uniqueId: "markdown-editor-content",
        delay: 1000,
    },
    renderingConfig: {
        singleLineBreaks: false,
        codeSyntaxHighlighting: true,
    },
});

// Update HTML preview
function updatePreview() {
    const markdownContent = easyMDE.value();
    const htmlContent = easyMDE.options.previewRender(markdownContent);
    document.getElementById('html-preview').innerHTML = htmlContent;
}

// Initialize preview
updatePreview();

// Update preview when content changes
easyMDE.codemirror.on('change', function() {
    updatePreview();
});

// Copy HTML function
function copyHtml(obj) {
    const htmlContent = document.getElementById('html-preview').innerHTML;

    // Create temporary element to get clean HTML
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = htmlContent;
    const cleanHtml = tempDiv.innerHTML;

    obj.textContent = 'Copied!';

    setTimeout(function() {
        obj.textContent = 'Copy HTML';
    }, 1000);

    navigator.clipboard.writeText(cleanHtml).catch(function(err) {
        console.error('Could not copy HTML: ', err);
    });

    return false;
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "Free Online Markdown Editor with Live Preview",
  "applicationCategory": "DeveloperApplication",
  "operatingSystem": "Any",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD"
  },
  "description": "Professional online Markdown editor with real-time HTML preview. Write, edit, and convert Markdown to HTML instantly with GitHub Flavored Markdown support.",
  "keywords": "markdown, editor, preview, html, converter, github flavored markdown, online tool"
}
</script>
{%endblock%}
